/**
 * @author:cloud.lg
 * @date:2021.7.26
 * @description: 报关单管理
 */
<template>
  <div class="tc-username-index fiexBox">
    <section class="tavle-content">
      <!-- 头部 -->
      <el-header height="auto">
        <!-- 搜索 -->
        <el-form :inline="true" :model="formData" class="demo-form-inline heard-search" @submit.native.prevent>
          <el-form-item label="搜索:">
            <el-input v-model="formData.searchValue" @keyup.enter.native="search" placeholder="请输入">
              <el-tooltip slot="append" class="item l" effect="dark" content="输入【用户编码】【账号】【用户名】模糊搜索" placement="top">
                <el-button icon="el-icon-warning"></el-button>
              </el-tooltip>
            </el-input>
          </el-form-item>
          <el-form-item class="content-box" label="部门:">
            <el-cascader
              v-icon-hide
              :show-all-levels="true"
              filterable
              v-model="formData.deptId"
              :options="deptList"
              :props="{ checkStrictly: true, value: 'id', label: 'label', emitPath: false}"
              clearable>
              <template slot-scope="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </template>
            </el-cascader>
          </el-form-item>
          <el-form-item label="角色:">
            <el-select v-model="formData.roleId" clearable filterable placeholder="请选择">
              <el-option v-for="(item, index) in roleList" :key="index" :label="item.roleName" :value="item.roleId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户状态:">
            <el-select v-model="formData.status" clearable placeholder="请选择">
              <el-option label="停用" :value="1"></el-option>
              <el-option label="启用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-tooltip class="item" effect="dark" content="搜索" placement="top">
              <el-button class="searchbtn" icon="el-icon-search" type="primary" @click="search"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="重置" placement="top">
              <el-button class="resetBtn" icon="el-icon-refresh-left" @click="search('reset')"></el-button>
            </el-tooltip>
          </el-form-item>
        </el-form>
        <!-- 按钮 -->
        <div class="main_search_button">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="searchButton('add_trade')">一般贸易</el-button>
        </div>
      </el-header>
      <!-- 表格 -->
      <el-main>
        <section ref="main_table" class="row-table">
          <el-table
            class="rowtable"
            :data="tableData"
            highlight-current-row
            @row-dblclick="tableClick"
            v-loading="isShowLoading"
            stripe
            :max-height="tableHeight"
            style="width: 100%">
            <el-table-column
              v-for="(item, index) in tableHeaderData"
              :key="index"
              :prop="item.prop"
              :width="item.width"
              align="left"
              :show-overflow-tooltip="true"
              :label="item.label">
              <template slot-scope="scope">
                <span v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
                <span v-else>- -</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="left"
              width="150">
              <template slot-scope="scope">
                <!-- <el-button  type="text" size="medium" class="p3" @click="addEdit('edit', scope.row)">编辑</el-button> -->
                <el-dropdown trigger="click" @command="dropdownCommand">
                  <span class="el-dropdown-link left-shu">
                    <el-button  type="text" size="medium" class="p3"><i class="iconfont icongengduo1"></i> 更多<i class="iconfont iconarrow-down"></i></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{key: 0, row: scope.row}">启用</el-dropdown-item>
                    <el-dropdown-item :command="{key: 1, row: scope.row}">停用</el-dropdown-item>
                    <el-dropdown-item :command="{key: 'reset', row: scope.row}">重置密码</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </section>
      </el-main>

      <!-- 分页 -->
      <el-footer height="auto">
        <div class="block-pagination r clearfix">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formData.page"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="formData.limit"
            layout="total, prev, pager, next, sizes, jumper"
            :total="totalCont">
          </el-pagination>
        </div>
      </el-footer>
    </section>

    <!-- 报关单 -->
    <!-- <customs-template :formRules="customsOption.formRules" :formDisabled="customsOption.formDisabled" :formInitData="customsOption.formInitData" :buttonClick="buttonClick"></customs-template> -->
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
import { getDeclMakeList } from '@/axios/business/decl';
import elementResizeDetectorMaker from "element-resize-detector";

var viewer = null;
export default {
  name: 'username',
  data () {
    return {
      formData: {
        page: 1,
        limit: 20,
        _t: 1628476582013
      },
      totalCont: 0,
      isShowLoading: false,
      roleList: [],
      deptList: [],
      tableHeight: 0,
      tableHeaderData: [
        { label: '制单日期', prop: 'makeTime', width: '100'},
        { label: '所属主体', prop: 'mainbodyName', width: '300'},
        { label: '截关时间/备注', prop: 'remark', width: '190'},
        { label: '代理客户', prop: 'customerId', width: '100'},
        { label: '境内收发货人', prop: 'entName', width: '242'},
        { label: '第一项品名', prop: 'firstGoodsName', width: '110'},
        { label: '项数', prop: 'goodsItemNum', width: '60'},
        { label: '柜号', prop: 'containers', width: '135'},
        { label: '提运单号', prop: 'drawNumber', width: '135'},
        { label: '柜号', prop: 'containers', width: '135'},
        { label: '舱单状态', prop: 'manifestDataJson', width: '145'},
        { label: '预录入编号', prop: 'manifestDataJson', width: '167'},
        { label: '报关单号', prop: 'customsCode', width: '163'},
        { label: '海关回执', prop: 'customsTips', width: '135'}
      ],
      tableData: [],
      // 报关单配置
      customsOption: {
        // rule 是否必填默认非必填
        formRules: {
          customerId: true,
          ioCustomsId: true
        },
        // disabled 是否禁用默认启用
        formDisabled: {
          ioType: true,
          customsCode: true,
          customsSeqno: true,
          passDate: true,
          delegationCode: true,
          'z-validTime': true,
          'z-ieDate': true
        },
        // 初始化数据
        formInitData: {
          ioType: 1,
          customsCode: '222'
        }
      }
    }
  },
  computed:{
    ...mapState([
      'editableTabs',
      'editableTabsValue',
      'partnerData',
      'menuData',
      'isSystem'
    ])
  },
  watch: {
  },
  components: {
    // customsTemplate: resolve => {require(['@/components/customsTemplate/index'], resolve)}, // 报关单
  },
  mounted() {
    this.watchSize();
  },
  created(){
    this.getTableList()
  },
  methods: {
    ...mapMutations([
      'SAVE_TOKEN',
      'SAVE_EDITABLETABSVALUE'
    ]),
    init() {

    },
    /**
     * @method 监听表格流体高度
     */
    watchSize() {
      const _this = this;
      var erd = elementResizeDetectorMaker();
      erd.listenTo(this.$refs.main_table, (element) => {
        var width = element.offsetWidth;
        var height = element.offsetHeight;
        _this.$nextTick(() => { // 这里填写监听改变后的操作
          _this.tableHeight = height
        });
      });
    },
    async getTableList() {
      this.isShowLoading = true
      let data = await getDeclMakeList(this.formData)
      if (data.code === 0) {
        this.tableData = data.data
        this.totalCont = data.count
      }
      this.isShowLoading = false
    },
    search(param) {
      if (param === 'reset') {
        this.formData.searchValue = ''
        this.formData.roleId = ''
        this.formData.status = ''
      }
      this.getTableList()
    },
    /**
    * @method 新增/编辑
    * @param {string} type add 新增 edit 编辑
    */
    addEdit(type, params) {
        this.$router.push({
          name: 'addUser',
          query: {
            type: type,
            userId: params ? params.userId : '',
            partnerId: this.partnerData.id,
            partnerName: this.partnerData.partnerName,
            page: this.formData.page
          }
        })
    },
    /**
    * @method 新增/编辑
    * @param {string} type add 新增 edit 编辑
    */
    searchButton(type){
      switch (type) {
        case 'add_trade': //一般贸易
        this.$router.push({
          path: '/business/decl/make',
          query: {}
        })
        break
      }
    },
    handleSizeChange(val) {
      this.formData.page = 1
      this.formData.limit = val
      this.getTableList()
    },
    handleCurrentChange(val) {
      this.formData.page = val
      this.getTableList()
    },
    /**
     * @method 下拉菜单点击
     * @param {string} param 1 启用 3 停用 reset 重置密码
     */
    dropdownCommand(param) {
      var confirmText = ''
      if (param.key !== 'reset') {
        if (param.key === 1) { confirmText = '停用后该用户将无法登录平台，是否确认停用？'}
        else if (param.key === 0) { confirmText = '是否启用该账户？'}
        this.$confirm(confirmText, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateUserEnabl({status: param.key, userId: param.row.userId}).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: res.msg
              })
              this.getTableList()
            }
          })
        }).catch(() => {})
      } else if (param.key === 'reset') {
        confirmText = '是否确认重置该账户密码?'
        this.$confirm(confirmText, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resetPwd({userId: param.row.userId}).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: res.msg
              })
              this.getTableList()
            }
          })
        }).catch((res) => {
        })
      }
    },
    /**
     * @method 表格点击
     */
    tableClick(row, column) {
      // this.$router.push({
      //   path: '/system/user/details',
      //   query: {
      //     id: row.userId,
      //     page: this.formData.page
      //   }
      // })
    },
    /**
     * 报关单点击回调
     */
    buttonClick(type, data) {
      console.log(type)
      console.log(data)
    }
  }
};
</script>

<style lang="scss">
@import "./index.scss";
</style>